<!-- 手机号-验证码登录表单 -->
<script lang="ts" setup>
  import { ref } from 'vue'

  const formRef = ref<UniHelper.UniFormsInstance>()
  const rules = {}

  const showCountdown =  ref(false) // 显示倒计时
</script>

<template>
  <view class="form">
    <uni-forms ref="formRef" :rules="rules">
      <uni-forms-item>
        <uni-easyinput :input-border="false" type="number" placeholder="请输入手机号" />
      </uni-forms-item>
      <uni-forms-item class="code-input">
        <uni-easyinput
          :input-border="false"
          type="number"
          placeholder="请输入验证码"
          :clearable="false"
        >
        </uni-easyinput>
        <text v-if="!showCountdown" @click="showCountdown = true" class="code-button">获取验证码</text>
         <view v-else class="code-button countdown">
           <uni-countdown
           @timeup="showCountdown = false"
             color="#ccc"
             :showDay="false"
             :showHour="false"
             :showMinute="false"
             :second="59"
           />后重新获取
         </view>
      </uni-forms-item>
      <button class="uni_button">登录</button>
    </uni-forms>
  </view>
</template>

<style lang="scss" scoped>
@import '@/uni.scss';
  .form {
    .uni-forms-item {
      border-bottom: 1px solid $uni-bg-color-custom;
    }

    // 修改验证码输入框宽度
    .code-input {
      .uni-easyinput {
        width: 450rpx;
      }
    }
  }
  // 修改验证码按钮样式
  .code-button {
    display: block;
    width: 240rpx;
    padding-left: 10rpx;
    font-size: 28rpx;
    border-left: 2rpx solid #eee;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(40rpx, -70%);
    display: flex;
  }
  .countdown {
    color: #ccc;
  }
</style>
